import React, { PureComponent } from 'react';
import { Col, Divider, Form, Radio, Row, Alert } from 'antd';
import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { TableCustomize } from '../../components/TableCustomize';
import * as DingTalkSettingsService from '../../axios/DingTalkSettings'

const FormItem = Form.Item;
const formItemLayout = {
	// 抽屉里面Form。二列的布局比例
	labelCol: {
		span: 6
	},
	wrapperCol: {
		span: 18
	}
};

class SettingsForm extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			routeList: [],
			columns: [
				{
					title: '序号',
					dataIndex: "index",
					render: (text, record, index) => index + 1
				},
				{
					title: '群名称',
					dataIndex: 'groupName',
					editable: true
				},
				{
					title: '群机器人加签密钥',
					dataIndex: 'secret',
					editable: true
				},
				{
					title: '群机器人Webhook',
					dataIndex: 'webhook',
					editable: true
				},
				{
					title: '备注',
					dataIndex: 'remark',
					editable: true
				},
				{
					title: '操作',
					dataIndex: 'opts',
					render: (text, record, index) => <a onClick={() => this.deleteRecord(index)}>清空</a>
				}
			],
			dataSource: [],
			loading: false,
			columns_people: [
				{
					title: '序号',
					dataIndex: "index",
					width: 100,
					render: (text, record, index) => index + 1
				},
				{
					title: '姓名',
					dataIndex: 'name',
					width: 100,
				},
				{
					width: 100,
					title: '工厂',
					dataIndex: 'userName1'
				},
				{
					width: 100,
					title: '部门',
					dataIndex: 'userName2'
				},
				{
					width: 100,
					title: '岗位',
					dataIndex: 'userName3'
				},
				{
					width: 100,
					title: '手机号码',
					dataIndex: 'phone'
				},
				{
					width: 100,
					title: '角色',
					dataIndex: 'userName4'
				},
			],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			loadingPeople: false,
			userList: [],
			selectedRowKeys: [],
			selectedRows: []
		};
	}
	componentDidMount() {
		const { formData } = this.props;
		let dataSource = [{id:'aa'}, {id:'bb'}, {id:'cc'}, {id:'dd'}, {id:'ee'}]
		if (formData && formData.sublistVOS && formData.sublistVOS.length <= 5) {
			for (var key in formData.sublistVOS) {
				dataSource[key] = {...dataSource[key],...formData.sublistVOS[key]}
			}
		}
		const { onSave } = this.props;
		onSave(1, dataSource);
		let chooseData = formData.pushUser;
		let selectedRowKeys = chooseData ? chooseData.split(',') : [];
		onSave(2, selectedRowKeys);
		this.setState({ dataSource, selectedRowKeys })
		this.getUserList();
	}
	getUserList = (pageNum = 1, pageSize = 9999) => {
		this.setState({ loadingPeople: true });
		DingTalkSettingsService.selectUser({ pageNum, pageSize }).then(res => {
			this.setState({
				userList: res.data.data,
				pageNum: pageNum,
				pageSize: pageSize,
				total: res.data.total,
				loadingPeople: false
			})
		})
	}
	deleteRecord = (index) => {
		this.setState({ loading: true }, () => setTimeout(() => {
			let data = this.state.dataSource;
			data[index] = {}
			const { onSave } = this.props;
			onSave(1, data)
			this.setState({ dataSource: data, loading: false })
		}))
	}
	getRecordValue = (value, dataSource) => {
		console.log(dataSource)
		const { onSave } = this.props;
		onSave(1, dataSource)
		this.setState({ dataSource })
	}
	// 选择某一行数据
	chooseRow = record => {
		let flag = true;
		let index = 0;
		this.state.selectedRowKeys.forEach((row, i) => {
			if (row === record.phone) {
				flag = false;
				index = i;
			}
		})
		const selectedRowKeys = this.state.selectedRowKeys;
		const selectedRows = this.state.selectedRows;
		if (flag) {
			selectedRowKeys.push(record.phone);
			selectedRows.push(record);
		} else {
			selectedRowKeys.splice(index, 1);
			selectedRows.splice(index, 1);
		}
		this.setState({ loadingPeople: true }, () => setTimeout(() => {
			const { onSave } = this.props;
			onSave(2, selectedRowKeys)
			this.setState({ selectedRowKeys, selectedRows, loadingPeople: false })
		}))
	};
	render() {
		const {
			formData,
			form: { getFieldDecorator, getFieldValue },
		} = this.props;
		const {
			columns,
			loading,
			dataSource,
			columns_people,
			userList,
			pageNum,
			pageSize,
			loadingPeople,
			total,
			selectedRowKeys } = this.state;
		const rowSelection = {
			onChange: (selectedRowKeys, selectedRows) => {
				const { onSave } = this.props;
				onSave(2, selectedRowKeys)
				this.setState({ selectedRowKeys, selectedRows })
			},
			selectedRowKeys: selectedRowKeys
		}
		return (
			<>
				<BasicLayoutSearch>
					<div style={{ fontWeight: 700 }}>
						1、推送类型配置
					</div>
					<Divider />
					<Form>
						<Row>
							<Col span={12}>
								<FormItem {...formItemLayout} label={'推送类型'}>
									{getFieldDecorator('pushType', {
										initialValue: formData.pushType || '',
										rules: [
											{
												required: true,
												message: '请选择推送类型'
											}
										]
									})(<Radio.Group>
										<Radio value={1}>个人</Radio>
										<Radio value={2}>群</Radio>
										<Radio value={3}>个人和群</Radio>
									</Radio.Group>)}
								</FormItem>
							</Col>
						</Row>
					</Form>
				</BasicLayoutSearch>
				<div style={{ display: getFieldValue('pushType') === 1 ? 'none' : 'block' }}>
					<BasicLayoutSearch >
						<div style={{ fontWeight: 700 }}>
							2、推送群配置
						</div>
						<Divider />
						<Alert message={<span>最多允许同时配置5个推送群，需要提前在钉钉群中配置群机器人，在列表中准确输入机器人加签密钥及Webhook，即可配置消息推送，消息推送的信息是预设好的。</span>} type="info" showIcon style={{ marginBottom: 15 }} />
						<TableCustomize columns={columns} rowKey={record => record.id} dataSource={dataSource} pagination={false} loading={loading} allowEditable={this.getRecordValue} />
					</BasicLayoutSearch>
				</div>
				<div style={{ display: getFieldValue('pushType') === 2 ? 'none' : 'block' }}>
					<BasicLayoutSearch>
						<div style={{ fontWeight: 700 }}>
							3、推送用户配置
						</div>
						<Divider />
						<Alert message={<span>当前推送功能已包含 {selectedRowKeys.length} 位用户！最多选择 30 位用户，更多用户信息的推送建议选用群推送。</span>} type="info" showIcon style={{ marginBottom: 15 }} />
						<BasicLayout name="用户列表" icon="table">
							<TableCustomize
								columns={columns_people}
								dataSource={userList}
								rowKey={(record) => record.phone}
								pagination={false}
								loading={loadingPeople}
								rowSelection={rowSelection}
								onRow={(record) => ({
									onClick: this.chooseRow.bind(this, record)
								})}
								scroll={{ y: 240 }}
							/>
							{/* <BasicPagination pageNum={pageNum} pageSize={pageSize} total={total} loadData={this.getUserList} /> */}
						</BasicLayout>
					</BasicLayoutSearch>
				</div>

			</>
		);
	}
}


export default Form.create()(SettingsForm);
